<template>
  <div class="building-page">
    <el-button v-auth-dir="`parking:area:add_edit`" type="primary" @click="addAreaFn">添加区域</el-button>
    <el-dialog
      title="添加区域"
      :visible="dialogVisible"
      width="580px"
      @close="closeDialog"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="区域名称" prop="areaName">
            <el-input v-model="addForm.areaName" />
          </el-form-item>
          <el-form-item label="车位数(个)" prop="spaceNumber">
            <el-input v-model="addForm.spaceNumber" />
          </el-form-item>
          <el-form-item label="面积(m²)" prop="areaProportion">
            <el-input v-model="addForm.areaProportion" />
          </el-form-item>
          <el-form-item label="关联计费规则" prop="ruleId">
            <el-select v-model="addForm.ruleId" placeholder="请选择">
              <el-option
                v-for="item in dropRuleList"
                :key="item.ruleId"
                :label="item.ruleName"
                :value="item.ruleId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="addForm.remark" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirmAdd">确 定</el-button>
      </template>
    </el-dialog>
    <!-- 表格区域 -->
    <div v-auth-dir="`parking:area:list`" class="table">
      <el-table
        style="width: 100%"
        :data="areaList"
      >
        <el-table-column
          prop="id"
          label="序号"
        >
          <template slot-scope="scope">
            {{ (params.page - 1) * params.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="区域名称"
          width="300"
          prop="areaName"
        />
        <el-table-column
          label="车位数(个)"
          width="150"
          prop="spaceNumber"
        />
        <el-table-column
          label="面积(m²)"
          width="200"
          prop="areaProportion"
        />
        <el-table-column
          label="计费规则(元/m²)"
          width="200"
          prop="ruleName"
        />
        <el-table-column label="备注" width="200" prop="remark" />
        <el-table-column
          label="操作"
          width="120"
        >
          <template #default="scope">
            <el-button v-auth-dir="`parking:area:add_edit`" size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button v-auth-dir="`parking:area:remove`" size="mini" type="text" @click="confirmDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-container">
        <el-pagination
          layout="total, prev, pager, next"
          :total="total"
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { createAreaAPI, editAreaAPI, getAreaListAPI, getDropRuleListAPI } from '@/apis/car'

export default {
  name: 'Area',
  data() {
    return {
      areaList: [], // 区域列表
      params: { // 请求参数
        page: 1,
        pageSize: 10
      },
      currentPage: 1, // 当前页码,
      total: 0, // 区域总数
      dropRuleList: [],
      addForm: {
        areaName: '',
        spaceNumber: '',
        areaProportion: '',
        ruleId: '',
        remark: ''
      },
      dialogVisible: false,
      addFormRules: {
        areaName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' }
        ],
        spaceNumber: [
          { required: true, message: '请输入车辆数', trigger: 'blur' }
        ],
        areaProportion: [
          { required: true, message: '请输入面积', trigger: 'blur' }
        ],
        ruleId: [
          { required: true, message: '请选择关联计费规则', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.dropRuleListFn()
  },
  methods: {
    edit(row) {
      // console.log(row)

      // 1. 打开弹框
      this.dialogVisible = true
      // 2. 解构必要字段
      const { id, areaName, spaceNumber, areaProportion, ruleId, remark } = row
      this.addForm = {
        id, areaName, spaceNumber, areaProportion, ruleId, remark
      }
    },
    // 点击弹窗确认事件
    async confirmAdd() {
      this.$refs.addForm.validate(async(valid) => {
        if (valid) {
          if (this.addForm.id) {
            await editAreaAPI(this.addForm)
            // console.log(res)
          } else {
            // 1. 提交接口
            await createAreaAPI(this.addForm)
          }
          // 2. 获取列表
          this.getList()
          // 4.提示用户，成功了
          this.addForm.id ? this.$message.success('编辑成功') : this.$message.success('添加成功')
          // 3. 关闭弹框
          this.dialogVisible = false
          delete this.addForm.id
          this.addForm.areaName = ''
          this.addForm.spaceNumber = ''
          this.addForm.areaProportion = ''
          this.addForm.ruleId = ''
          this.addForm.remark = ''
          // 5.跳转到第一页
          this.params.page = 1
        }
      })
    },
    // 添加区域点击事件
    addAreaFn() {
      this.dialogVisible = true
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
    },
    // 获取规则下拉列表
    async dropRuleListFn() {
      const res = await getDropRuleListAPI()
      // console.log(res)

      this.dropRuleList = res.data
    },
    // 获取区域列表
    async getList() {
      // console.log(this.params)

      const res = await getAreaListAPI(this.params)
      // console.log(res.data.rows)
      this.areaList = res.data.rows
      this.total = res.data.total
    },
    pageChange(page) { // 分页点击事件
      // 更改参数
      this.params.page = page
      // console.log(this.params.page)

      // 重新获取数据渲染
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.building-page{
  padding: 20px;
}
.page-container{
    padding:4px 0px;
    text-align: right;
  }
</style>
